<template>
  <div>
    <el-form
      :disabled="disableElement"
      :model="provinceTelecomApprovalFormDatas"
      :rules="rules"
      label-width="150px"
      ref="provinceTelecomApprovalForm"
      style="width: 70%; margin-left: 15%"
    >
      <el-form-item
        label="审批意见"
        prop="ProvinceTelecomApprovalComment"
        :required="isAgree"
      >
        <el-input
          type="textarea"
          v-model="
            provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalComment
          "
        />
      </el-form-item>
      <el-form-item label="常用意见" v-if="showCommonComments" prop="ProvinceTelecomCommonComments">
<!--        <el-select-->
<!--          style="width: 100%"-->
<!--          v-model="-->
<!--            provinceTelecomApprovalFormDatas.ProvinceTelecomCommonComments-->
<!--          "-->
<!--          placeholder="请选择常用意见"-->
<!--          @change="provinceTelecomCommonCommentsSelected"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="dict in provinceGeneralAdviceList"-->
<!--            :key="dict.dictValue"-->
<!--            :label="dict.dictLabel"-->
<!--            :value="dict.dictLabel"-->
<!--          ></el-option>-->
<!--        </el-select>-->
        <el-tag style="margin-left: 5px"
          v-for="tag in provinceGeneralAdviceList"
          :key="tag.dictLabel" @click="provinceTelecomCommonCommentsSelected">
          {{tag.dictLabel}}
        </el-tag>
      </el-form-item>
      <el-form-item label="审批结果" prop="ProvinceTelecomApprovalResult">
        <el-radio-group
          v-model="
            provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalResult
          "
          @change="provinceTelecomApprovalResultSet"
        >
          <el-radio :label="1">同意</el-radio>
          <el-radio :label="2">不同意</el-radio>
        </el-radio-group>
      </el-form-item>
      <div
        v-if="showFormBtn"
        style="
          width: 30%;
          margin-left: 35%;
          display: flex;
          justify-content: space-between;
        "
      >
        <el-button type="primary" size="mini" @click="submitForm">提交</el-button>
        <el-button  size="mini" @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getDicts } from "../../../api/system/dict/data";
export default {
  props: ["provinceTelecomApprovalFormData", "showFormBtn", "disableElement","showCommonComments"],
  data() {
    const notAgree = (rule, value, callback) => {
      if (this.isAgree && value == "") {
        callback(new Error("审批意见不能为空"));
      } else {
        callback();
      }
      /* if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      } */
    };

    return {
      provinceTelecomApprovalFormDatas: this.provinceTelecomApprovalFormData,
      isAgree: false,
      provinceGeneralAdviceList: [],
      rules: {
        ProvinceTelecomApprovalResult: [
          {
            required: true,
            message: "审批结果不能为空",
            trigger: "blur",
          },
        ],
        ProvinceTelecomApprovalComment: [
          {
            validator: notAgree,
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    getDicts("provinceGeneralAdvice").then((res) => {
      this.provinceGeneralAdviceList = res.data;
    });
    if(this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalResult == 2){
      this.isAgree = true;
    }else{
      this.isAgree = false;
    }
  },
  methods: {
    //常用意见选择框change事件
    provinceTelecomCommonCommentsSelected(e) {
      this.provinceTelecomApprovalFormDatas.ProvinceTelecomCommonComments = e.target.innerText;
      if (
        this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalComment
          .length == 0
      ) {
        this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalComment =
          e.target.innerText;
      } else {
        this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalComment =
          this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalComment +
          "\n" +
          e.target.innerText;
      }
    },
    /** 省信息通信审批结果变化 */
    provinceTelecomApprovalResultSet() {
      if (
        this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalResult == 1
      ) {
        //this.cityTelecomApprovalRules = this.rules;
        this.isAgree = false;
      } else {
        this.isAgree = true;
        //this.cityTelecomApprovalRules = [];
        //this.$refs["provinceTelecomApprovalForm"].resetFields();
        this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalResult = 2;
      }
    },
    /** 清空表单 */
    resetForm() {
      //请空数据
      this.provinceTelecomApprovalFormDatas = {
        ProvinceTelecomApprovalResult: 1,
        ProvinceTelecomApprovalComment: "",
        ProvinceTelecomCommonComments: "",
      };
      this.isAgree = false;
      this.$refs.provinceTelecomApprovalForm.clearValidate();
    },
    submitForm() {
      if (
        this.provinceTelecomApprovalFormDatas.ProvinceTelecomApprovalResult == 1
      ) {
        this.$refs.provinceTelecomApprovalForm.validate((valid) => {

          if (!valid) return false;
          // 触发sumit事件
          const params = {
            formType: "ProvinceTelecomApprovalForm",
            formData: this.provinceTelecomApprovalFormDatas,
          };
          this.$emit("submit", params);
          return true;
        });
      } else {
        this.$refs.provinceTelecomApprovalForm.validateField(
          "ProvinceTelecomApprovalComment",
          (valid) => {
            if (valid == "审批意见不能为空") return false;
            const params = {
              formType: "ProvinceTelecomApprovalForm",
              formData:  this.provinceTelecomApprovalFormDatas,
              noAgree: 1,
            };
            this.$emit("submit", params);
            return true;
          }
        );
      }
    },
  },
};
</script>
